<template>
	<view id="classify" class="page-container">
		<view class="item-wrap">
			<view class="sex">
				<text v-for="(item, index) in classifyItem.sex" 
				 :style="{'color':selectColor.sex==item.value?selectColor.colors:'#333'}" @click="sexSelect(item.value)" :key="index">{{item.name}}</text>
			</view>
			<view class="category">
				<text v-for="(item, index) in classifyItem.category" :style="{'color':selectColor.category==item.value?selectColor.colors:'#333'}"
				@click="categorySelect(item.value)" :key="index">
				{{item.name}}
				</text>
			</view>
			<view class="complete">
				<text v-for="(item, index) in classifyItem.complete" :style="{'color':selectColor.complete==item.value?selectColor.colors:'#333'}"
				@click="completeSelect(item.value)" :key="index">
				{{item.name}}
				</text>
			</view>
			<view class="mType">
				<text v-for="(item, index) in classifyItem.mType" :style="{'color':selectColor.mType==item.value?selectColor.colors:'#333'}"
				@click="mTypeSelect(item.value)" :key="index">
				{{item.name}}
				</text>
			</view>
		</view>
		
		
		
		<view id="read_page">
			<view class="read_list item u-border-bottom" v-for="(item, index) in bookList" :key="index" @click="navigateToChapter(item.book_id)">
				<view class="img">
					<image :src="item.book_cover"></image>
					<!-- <image src="../../static/logo.png"></image> -->
				</view>
				
				<view class="content">
					<view class="title">
						<text class="name" :style="{'color':selectColor.sex==1?selectColor.colors:'#6f78a7'}">{{item.book_name}} <text style="margin-left:20rpx;color: #999;">{{item.score}}分</text></text>
					</view>
					<view class="desc">
						{{item.book_brief}}
					</view>
					
					<view class="list_bottom">
						<text class="author">作者：{{item.book_author}}</text>
						<text style="color: #999;">{{item.book_wordCount}}字</text>
					</view>
				</view>
				
			</view>
			<u-loadmore :status="status" :load-text="loadText"  @loadmore="loadMore"/>
		</view>
		
		<!-- <view style="font-size: 24rpx;color: #999;">没有更多了...</view> -->
		
	</view>
</template>

<script>
	import { getClassify } from '../../util/request/book.js'
	export default {
		data() {
			return {
				classifyItem: {
					sex: [
						{ value: 15, name: "男生"},
						{ value: 1, name: "女生"}
					],
					
					categoryList: {
						"15": [{ value: 888, name: "军事"},
						{ value: 16, name: "都市"},
						{ value: 5, name: "武侠"},
						{ value: 555, name: "悬疑"},
						{ value: 17, name: "玄幻"},
						{ value: 7, name: "其他"}],
						"1": [
						{ value: 2, name: "古言"},
						{ value: 3, name: "现言"},
						{ value: 7, name: "其他"}
					]
					},
					
					category: [
						{ value: 888, name: "军事"},
						{ value: 16, name: "都市"},
						{ value: 5, name: "武侠"},
						{ value: 555, name: "悬疑"},
						{ value: 17, name: "玄幻"},
						{ value: 7, name: "其他"}
					],
					
					complete: [
						{ value: 2, name: "全部"},
						{ value: 0, name: "连载"},
						{ value: 1, name: "完本"}
					],
					
					mType: [
						{ value: 0, name: "全部"},
						{ value: 3, name: "最近更新"},
						{ value: 4, name: "评分最高"}
					]
					
				},
				
				
				loadText: {
					loadmore: '努力加载中...',
					loading: '努力加载中...',
					nomore: '没有更多了...'
				},
				
				status: "loadmore",
				
				page: 1,
				
				
				selectColor: {
					sex: 0,
					category: 0,
					complete: 2,
					mType: 0,
					colors: '#2979ff'
				},
				
				
				bookList: [],
				loadList: []
				
			}
		},
		
		onLoad(option) {
			console.log("options",option.type,option.current)
			this.selectColor.sex = option.current || 15;
			this.selectColor.category = option.type || 888;
			this.classifyItem.category = this.classifyItem.categoryList[option.current]
			this.getBookList();
		},
		
		
		onReachBottom() {
			console.log(12333)
			if(this.loadList.length<=0) return ;
			
			
			
			// if(this.page >= 3) return ;
			this.status = 'loading';
			// this.page = ++ this.page;
			console.log("this.loadList22",this.loadList.splice(0,9))
			setTimeout(() => {
				this.bookList = this.bookList.concat(this.loadList.splice(0,9));
				console.log("this.bookList",this.bookList)
				if(this.loadList.length<=0) this.status = 'nomore';
				else this.status = 'loading';
			}, 500)
		},
		
		methods:{
			/**
			 * @param {Object} index
			 * 选性别
			 */
			sexSelect(sex) {
				this.classifyItem.category = this.classifyItem.categoryList[sex]
				this.selectColor.sex = sex;
				if(sex==1) this.selectColor.category = 2;
				else this.selectColor.category = 888;
				this.getBookList();
			},
			/**
			 * 类别
			 */
			categorySelect(value) {
				this.selectColor.category = value;
				this.getBookList();
			},
			/**
			 * 是否完成
			 */
			completeSelect(value) {
				this.selectColor.complete = value;
				this.getBookList();
			},
			
			/**
			 * 更新状态
			 */
			mTypeSelect(value) {
				this.selectColor.mType = value;
				this.getBookList();
			},
			
			/**
			 * 获取列表
			 */
			getBookList() {
				let that = this;
				if(this.selectColor.sex==1) this.selectColor.colors = "#fa9600"
				else this.selectColor.colors = "#2979ff"
				getClassify({ mtype: this.selectColor.mType,
						book_category2Id: this.selectColor.category,
						book_complete: this.selectColor.complete,
						book_category_id: this.selectColor.sex,
						pageNum: 1
						}).then(res=>{
					that.bookList = res.msg.splice(0,9);
					that.loadList = res.msg;
					console.log("that.loadList",that.loadList)
				})
				
			},
			
			/**
			 * 到书本详情
			 */
			navigateToChapter(id) {
				uni.navigateTo({
					url: "/novel/chapter/index?book_id="+id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	#classify{
		padding: 16rpx 30rpx;
		font-size: 28rpx;
		.item-wrap{
			display: flex;
			flex-direction: column;
			
			view{
				display: flex;
				flex-direction: row;
				padding:20rpx 0;
				
				text{
					padding: 10rpx;
					margin-left:20rpx;
				}
				
				.active{
					color: #2979ff;
				}
			}
		}
		
		
		#read_page{
			.read_list{
				display: flex;
				flex-direction: row;
				max-height: 165rpx;
				border-bottom: 1rpx solid #dde;
				padding:16rpx;
				
				
				.img{
					
					image{
						height: 100%;
						width: 100rpx;
					}
				}
			}
			
			.content{
				width: 100%;
				margin-left:20rpx;
				font-size: 22rpx;
				.title{
					display: flex;
					justify-content: space-between;
					height:48rpx;
					// border-bottom: 1rpx dotted #dde;
					
					.name{
						font-weight: bold;
						color: #6f78a7;
					}
					.author{
						color: #999;
					}
				}
				
				.desc{
					font-size: 22rpx;
					display:-webkit-box;
					-webkit-box-orient:vertical;
					-webkit-line-clamp:2;
					height: 63rpx;
					overflow: hidden;
					text-overflow:ellipsis;
					color:#666;
				}
				
				
				.list_bottom{
					padding-top: 10rpx;
					display: flex;
					justify-content: space-between;
					color:#999;
					font-size: 20rpx;
				}
			}
		}
	}
</style>
